<template>
  <el-card class="app-container">
    <div>
      <el-form size="mini" inline>
        <el-form-item>
          <el-select v-model="formData.styleSelectorId" clearable placeholder="请选择选款师" filterable>
            <el-option v-for="store in userList" :key="store.value" :value="store.value" :label="store.label"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.artDesignerId" clearable placeholder="请选择美工" filterable>
            <el-option v-for="store in userList" :key="store.value" :value="store.value" :label="store.label"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.categories" clearable placeholder="请选择类目" filterable>
            <el-option v-for="store in categoriesList" :key="store.value" :value="store.value" :label="store.label"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.opAssistantId" clearable placeholder="请选择运营助理" filterable>
            <el-option v-for="store in userList" :key="store.value" :value="store.value" :label="store.label"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.storeId" clearable placeholder="请选择店铺" filterable>
            <el-option v-for="store in storeList" :key="store.value" :value="store.value" :label="store.label"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formData.dateRange"
            :picker-options="dateRangePickerOptions"
            type="daterange"
            :clearable="false"
            range-separator="至"
            value-format="yyyy-MM-dd"
            style="width: 250px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadData" type="primary">搜索</el-button>
          <el-button @click="showExportDialog" type="danger">导出</el-button>
        </el-form-item>
      </el-form>
      <div>
        <!--            <chart :option="storeBackoutRateOption"/>-->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-table
              :summary-method="getSummaries"
              show-summary
              border
              size="mini"
              :data="styleSelectorDataList"
              v-loading="isLoadingStyleSelectorData"
            >
              <el-table-column
                prop="storeTitle"
                label="店铺"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="title"
                label="选款师"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="bloggerNum"
                label="新增博主"
                width="80"
              >
              </el-table-column>

              <el-table-column
                prop="count"
                label="采纳个数"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="totalCount"
                label="选款总数"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="countPercent"
                label="采纳率"
                width="80"
              >
                <template slot-scope="scope">
                  {{ scope.row.countPercent }} %
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="4">
            <el-table
              :summary-method="getSummaries"
              border
              size="mini"
              show-summary
              :data="artDesignerDataList"
              v-loading="isLoadingArtDesignerData"
            >
              <el-table-column
                prop="storeTitle"
                label="店铺"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="title"
                label="美工"
                width="80"
              >
              </el-table-column>

              <el-table-column
                prop="count"
                label="上新个数"
                width="70"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="3">
            <el-table
              :summary-method="getSummaries"
              border
              size="mini"
              show-summary
              :data="styleDataList"
              v-loading="isLoadingStyleData"
            >
              <el-table-column
                prop="title"
                label="风格"
                width="auto"
              >
              </el-table-column>

              <el-table-column
                prop="count"
                label="风格个数"
                width="100"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="3">
            <el-table
              :summary-method="getSummaries"
              show-summary
              border
              size="mini"
              :data="channelDataList"
              v-loading="isLoadingChannelData"
            >
              <el-table-column
                prop="title"
                label="渠道"
                width="70"
              >
              </el-table-column>

              <el-table-column
                prop="count"
                label="渠道个数"
                min-width="70"
                width="auto"
              >
              </el-table-column>
            </el-table>
            <el-table
              style="margin-top: 30px"
              :summary-method="getSummaries"
              show-summary
              border
              size="mini"
              :data="categoriesDataList"
              v-loading="isLoadingCategories"
            >
              <el-table-column
                prop="title"
                label="类目"
                width="100"
              >
              </el-table-column>

              <el-table-column
                prop="count"
                label="数量"
                min-width="70"
                width="auto"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="6">
            <el-table
              :summary-method="getSummaries"
              show-summary
              border
              size="mini"
              :data="opAssistantDataDataList"
              v-loading="isLoadingOpAssistantData"
            >
              <el-table-column
                prop="storeTitle"
                label="店铺"
                width="auto"
              >
              </el-table-column>

              <el-table-column
                prop="title"
                label="运营助理"
                width="70"
              >
              </el-table-column>

              <el-table-column
                prop="count"
                label="取标题"
                width="70"
              >
              </el-table-column>
              <el-table-column
                prop="modifiedCount"
                label="修改个数"
                width="70"
              >
              </el-table-column>
              <el-table-column
                prop="modifiedRate"
                label="修改率"
                width="70"
              >
                <template slot-scope="scope">
                  {{ scope.row.modifiedRate }} %
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
    <el-dialog :visible.sync="exportDialogShowed" title="选择导出" width="400px">
      <div style="line-height: 4;width: 200px;margin: 0 auto">
        <div class="flex">
          <div style="padding-right: 20px;width: 150px;text-align: right">
            选款师数据报表
          </div>
          <el-button size="mini" type="primary" @click="handleExportStyleSelector">导出</el-button>
        </div>
        <div class="flex">
          <div style="padding-right: 20px;width: 150px;text-align: right">
            美工数据报表
          </div>
          <el-button size="mini" type="primary" @click="handleExportArtDesignerStatistics">导出</el-button>
        </div>
        <div class="flex">
          <div style="padding-right: 20px;width: 150px;text-align: right">
            风格数据报表
          </div>
          <el-button size="mini" type="primary" @click="handleExportStyleStatistics">导出</el-button>
        </div>
        <div class="flex">
          <div style="padding-right: 20px;width: 150px;text-align: right">
            渠道数据报表
          </div>
          <el-button size="mini" type="primary" @click="handleExportChannelStatistics">导出</el-button>
        </div>
        <div class="flex">
          <div style="padding-right: 20px;width: 150px;text-align: right">
            类目数据报表
          </div>
          <el-button size="mini" type="primary" @click="handleExportCategoriesStatistics">导出</el-button>
        </div>
        <div class="flex">
          <div style="padding-right: 20px;width: 150px;text-align: right">
            运营助理数据报表
          </div>
          <el-button size="mini" type="primary" @click="exportOpAssistantIdStatistics">导出</el-button>
        </div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { voteBadCommentApi } from '@/feature/cmt/infra/api/voteBadCommentApi'
import LineChart from '@/components/chart/LineChart'
import RaddarChart from '@/components/chart/RaddarChart'
import PieChart from '@/components/chart/PieChart'
import BarChart from '@/components/chart/BarChart'
import Chart from '@/components/chart/Chart'
import ExcelUtil from '@/framework/infra/excel/ExcelUtil'
import LoadingDialog from '@/framework/components/dialog/LoadingDialog'
import { complainFollowUpApi } from '@/feature/cmt/infra/api/complainFollowUpApi'
import { dateRangePickerOptions } from '@/framework/constant/DatePickerOptions'
import { newProductRegisterApi } from '@/feature/pdt/infra/api/newProductRegisterApi'
import moment from 'moment'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import CollectionUtil from '@/framework/infra/collection/CollectionUtil'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'

export default {
  components: { LoadingDialog, Chart, BarChart, PieChart, RaddarChart, LineChart },
  data() {
    return {
      isExporting: false,
      userList: [],
      categoriesList: [],
      formData: {
        storeId: '',
        userId: '',
        categories: '',
        styleSelectorId: '',
        artDesignerId: '',
        opAssistantId: '',
        dateRange: [
          moment().startOf('month').format('YYYY-MM-DD'),
          moment().format('YYYY-MM-DD')
        ]
      },
      storeList: [],
      dateRangePickerOptions,
      isLoadingArtDesignerData: false,
      artDesignerDataList: [],

      exportDialogShowed: false,
      isLoadingStyleData: false,
      styleDataList: [],

      isLoadingChannelData: false,
      isLoadingCategories: false,
      channelDataList: [],
      categoriesDataList: [],

      isLoadingStyleSelectorData: false,
      styleSelectorDataList: [],

      isLoadingOpAssistantData: false,
      opAssistantDataDataList: []
    }
  },
  created() {
    this.loadData()
    this.loadUserList()
    this.loadCategories()
  },
  methods: {
    loadUserList() {
      adminApi.listAll().then(data => {
        this.userList = data
      })
    },
    loadCategories() {
      dicApi.allOptions(SysDicTypeEnum.CATEGORY.id).then(data => {
        this.categoriesList = data
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (column.property === 'modifiedRate' || column.property === 'countPercent') {
            sums[index] = (sums[index] / values.length).toFixed(2) + '%'
          }
        } else {
          // sums[index] = 'N/A';
          sums[index] = ''
        }
      })
      return sums
    },
    showExportDialog() {
      this.exportDialogShowed = true
    },
    loadData() {
      this.queryStyleSelectorStatistics()
      this.queryArtDesignerStatistics()
      this.queryStyleStatistics()
      this.queryOpAssistantIdStatistics()
      this.queryChannelStatistics()
      this.queryCategoriesStatistics()
      this.loadStoreList()
    },
    loadStoreList() {
      storeApi.options().then(data => {
        this.storeList = data
      })
    },
    queryStyleSelectorStatistics() {
      this.isLoadingStyleSelectorData = true
      newProductRegisterApi.queryStyleSelectorStatistics(this.formData).then(data => {
        this.styleSelectorDataList = data
      }).finally(() => {
        this.isLoadingStyleSelectorData = false
      })
    },
    handleExportStyleSelector() {
      this.isExporting = true
      newProductRegisterApi.queryStyleSelectorStatistics(this.formData).then(data => {
        const header = ['店铺', '选款师', '新增博主', '采纳个数', '选款总数', '采纳率']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([row.storeTitle, row.title, row.bloggerNum, row.count, row.totalCount, row.totalPercent + '%'])
          }
          exportedData.push(['总计', '', CollectionUtil.sum(data, el => el.count),
            CollectionUtil.sum(data, el => el.totalCount),
            (CollectionUtil.sum(data, el => el.totalPercent) / data.length).toFixed(2) + '%'
          ])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '选款师数据报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    queryArtDesignerStatistics() {
      this.isLoadingArtDesignerData = true
      newProductRegisterApi.queryArtDesignerStatistics(this.formData).then(data => {
        this.artDesignerDataList = data
      }).finally(() => {
        this.isLoadingArtDesignerData = false
      })
    },
    handleExportArtDesignerStatistics() {
      this.isExporting = true
      newProductRegisterApi.queryArtDesignerStatistics(this.formData).then(data => {
        const header = ['店铺', '美工', '上新个数']
        const exportedData = []
        if (data) {
          for (const row of data) {
            exportedData.push([row.storeTitle, row.title, row.count])
          }
          exportedData.push(['总计', '', CollectionUtil.sum(data, el => el.count)
          ])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '美工数据报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    queryStyleStatistics() {
      this.isLoadingStyleData = true
      newProductRegisterApi.queryStyleStatistics(this.formData).then(data => {
        this.styleDataList = data
      }).finally(() => {
        this.isLoadingStyleData = false
      })
    },
    handleExportStyleStatistics() {
      this.isExporting = true
      newProductRegisterApi.queryStyleStatistics(this.formData).then(data => {
        const header = ['风格', '风格个数']
        const exportedData = []
        if (data) {
          for (const row of data) {
            exportedData.push([row.title, row.count])
          }
          exportedData.push(['总计', CollectionUtil.sum(data, el => el.count)
          ])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '风格数据报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    queryOpAssistantIdStatistics() {
      this.isLoadingOpAssistantData = true
      newProductRegisterApi.queryOpAssistantIdStatistics(this.formData).then(data => {
        this.opAssistantDataDataList = data
      }).finally(() => {
        this.isLoadingOpAssistantData = false
      })
    },
    exportOpAssistantIdStatistics() {
      this.isExporting = true
      newProductRegisterApi.queryOpAssistantIdStatistics(this.formData).then(data => {
        const header = ['店铺', '运营助理', '取标题', '修改个数', '修改率']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([row.storeTitle, row.title, row.count, row.modifiedCount, row.modifiedRate + '%'])
          }
          exportedData.push(['总计', '', CollectionUtil.sum(data, el => el.count), CollectionUtil.sum(data, el => el.modifiedCount), (CollectionUtil.sum(data, el => el.modifiedRate) / data.length).toFixed(2) + '%'])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '运营助理数据报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    queryChannelStatistics() {
      this.isLoadingChannelData = true
      newProductRegisterApi.queryChannelStatistics(this.formData).then(data => {
        this.channelDataList = data
      }).finally(() => {
        this.isLoadingChannelData = false
      })
    },
    queryCategoriesStatistics() {
      this.isLoadingCategories = true
      newProductRegisterApi.queryCategoriesStatistics(this.formData).then(data => {
        this.categoriesDataList = data
      }).finally(() => {
        this.isLoadingCategories = false
      })
    },
    handleExportChannelStatistics() {
      this.isExporting = true
      newProductRegisterApi.queryChannelStatistics(this.formData).then(data => {
        const header = ['渠道', '渠道个数']
        const exportedData = []
        if (data) {
          for (const row of data) {
            exportedData.push([row.title, row.count])
          }
          exportedData.push(['总计', CollectionUtil.sum(data, el => el.count)
          ])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '渠道数据报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    handleExportCategoriesStatistics() {
      this.isExporting = true
      newProductRegisterApi.queryCategoriesStatistics(this.formData).then(data => {
        const header = ['类目', '数量']
        const exportedData = []
        if (data) {
          for (const row of data) {
            exportedData.push([row.title, row.count])
          }
          exportedData.push(['总计', CollectionUtil.sum(data, el => el.count)
          ])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '类目数据报表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    exportRevocationRateByFollower() {
      this.isExporting = true
      complainFollowUpApi.queryRevocationDataByStore(this.formData.dateRange4Follower).then(data => {
        const header = ['跟进人', '跟进记录总数', '撤销记录总数', '赔付金额', '撤销率']
        const exportedData = []
        if (data) {
          for (const row of data) {
            exportedData.push([row.followerName, row.totalNum, row.backOutNum, row.payOutAmount, (row.rate * 100).toFixed(2) + '%'])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '跟进人撤销率统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    exportstyleSelectorDataList() {
      this.isExporting = true
      complainFollowUpApi.queryRevocationDataByStore(this.formData.dateRange).then(data => {
        const header = ['店铺名', '撤销总数', '实际撤销数量', '撤销率']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([row.storeTitle, row.totalNum, row.backOutNum, (row.rate * 100).toFixed(2) + '%'])
          }
          exportedData.push(['合计', exportedData.map(row => row[1]).reduce((r, a) => r + a, 0), exportedData.map(row => row[2]).reduce((r, a) => r + a, 0), (exportedData.map(row => parseFloat(row[3])).reduce((r, a) => r + a, 0) / exportedData.length).toFixed(2) + '%'])
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '店铺投诉撤销率统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    }
  }
}
</script>

<style scoped lang="scss">

.card_fitTitle {
  font-size: 14px;
  color: #999;
  padding-bottom: 10px;

}

.center {
  text-align: center;
}

.card-num {
  font-size: 24px;
  padding-bottom: 10px;
}

.card-unit {
  font-size: 12px;
}

.news {

  &__sep {
    margin: 0 15px;
  }

  &__content {
    color: #999;
  }

}

.card-txt {
  font-size: 14px;
}

.short-cut {
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
  float: left;
  margin-right: 30px;
}

.short-cuts-content {
  overflow: hidden;
  box-sizing: border-box;
}

.short-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.short-cuts-title {
  padding-bottom: 30px;
}

.todolist {
  padding: 50px 0 10px 0;
}

.todolist .el-row {
  padding-bottom: 15px;
}

.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

.short-cuts-title {
  font-size: 18px;
  font-weight: bold;
}

.todo-block {
  text-align: center;
  display: inline-block;
  width: 120px;
  margin-bottom: 20px;
}

.todo-txt {
  font-size: 14px;
}

.todo-block .todo-num {
  font-size: 18px;
  padding-bottom: 10px;
}
</style>
